<script setup>
import { reactive } from "vue";
import VideoShow from "@/views/situation/VideoShow.vue";
import ImportPalceShow from "@/views/situation/ImportPalceShow.vue";
import TrendShow from "@/views/situation/TrendShow.vue";
import MapShow from "@/views/situation/MapShow.vue";
import SiteCodeShow from "@/views/situation/SiteCodeShow.vue";
import ReturnShow from "@/views/situation/ReturnShow.vue";
import PeopleShow from "@/views/situation/PeopleShow.vue";
import YellowRedShow from "@/views/situation/YellowRedShow.vue";
// 411623002000
const mapData = reactive({
  areaCode: '',
  centerLat: '',
  centerLon: '',
  geoJson: '',
  id: '',
  level: 0,
  name: ''
});
const lonOrlat = reactive([]);
function getNewMapData(data) {
  console.log('new', data);
  mapData.areaCode = data.areaCode;
  mapData.centerLat = data.centerLat;
  mapData.centerLon = data.centerLon;
  mapData.geoJson = data.geoJson;
  mapData.id = data.id;
  mapData.level = data.level;
  mapData.name = data.name;
}

function makePositon(arr) {
  lonOrlat.splice(0, lonOrlat.length);
  arr.forEach((item) => {
    lonOrlat.push(item);
  });
}
</script>

<template>
  <div class="mainContent">
    <div class="part1">
      <div class="situaItem">
        <div class="situaNode"><VideoShow @makePositon="makePositon" /></div>
        <div class="situaNode"><ImportPalceShow :mapData="mapData" /></div>
      </div>
      <div class="situaItem">
        <div class="situaNode"><MapShow @changeAreaData="getNewMapData" :mapData="mapData" :lonOrlat="lonOrlat"/></div>
      </div>
      <div class="situaItem">
        <div class="situaNode"><ReturnShow /></div>
        <div class="situaNode"><PeopleShow :mapData="mapData" /></div>
      </div>
    </div>
    <div class="part2">
      <div class="situaNode"><TrendShow /></div>
      <div class="situaNode"><SiteCodeShow /></div>
      <div class="situaNode"><YellowRedShow /></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mainContent {
  height: 86vh;
  display: flex;
  flex-direction: column;
  flex: 1;
  .part1 {
    height: 66%;
    display: flex;
    flex: 2;
    flex-direction: row;

    .situaItem {
      flex: 1;
      display: flex;
      flex-direction: column;

      .situaNode {
        flex: 1;
        margin: 0.8vh;
      }
    }
  }
  .part2 {
    height: 33%;
    display: flex;
    flex-direction: row;
    flex: 1;
    .situaNode {
      flex: 1;
      margin: 0.8vh;
    }
  }
}
</style>
